<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: LnDamowang
  Date: 2018-12-24
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <script>

        function searcha() {
            //返回表格的 Options。
            var opts = $("#tb").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var name = $("#gname").val() ;
            $.post("/goods/querySearch",{'name':name,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                // alert(data)
                $("#tb").bootstrapTable('load',data) ;
            })
        }

        $(function () {
            $("#tb").bootstrapTable({
                url:'/goods/querySearch',
                height:480,
                pageSize:2,
                pageList:[2,4,8,16],
                detailView:true,
                // pagination:true,
                toolbar :'#tool',
                pageNumber:1,
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                // //启用服务器端分页
                sidePagination:'server',
                // //设置 true 将禁止多选。
                singleSelect:false,
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        name:$("#gname").val()
                    };
                    return temp;
                },
                columns:[{
                    checkbox:true
                },
                    {
                        field:'id',
                        title:'编号'
                    },
                    {
                        field:'name',
                        title:'名称'
                    },
                    {
                        field:'unit',
                        title:'单位'
                    },
                    {
                        field:'specifications',
                        title:'规格'
                    },
                    {
                        field:'supplier.name',
                        title:'供应厂商'
                    },
                    {
                        field:'purchasePrice',
                        title:'进价'
                    },
                    {
                        field:'price',
                        title:'售价'
                    },
                    {
                        title:'操作',
                        formatter:function(value,row,index){
                            return "<button class='btn  btn-primary' onclick='toxiugai(("+index+"))'><span class='glyphicon glyphicon-pencil'></span>&nbsp;修改</button>"
                        }
                    }
                ]
            }) ;
        }) ;
        // 添加打开模态框
        function toadd() {
            var list = "";
            $.ajax({
                'type':'post',
                'url':'${pageContext.request.contextPath}/goods/toadd',
                success:function (date) {
                   if(date!=null){

                       list = date["typeList"];
                       var typeList = "";
                       for(var goodsType in list){
                           typeList += "<option value='"+list[goodsType].id+"'>"+list[goodsType].name+"</option>";
                       }


                       list = date["subList"];
                       var subList = "";
                       for(var sub in list){
                           subList += "<option value='"+list[sub].id+"'>"+list[sub].name+"</option>";
                       }

                       list = date["wareList"];
                       var wareList = "";
                       for(var ware in list){
                           wareList += "<option value='"+list[ware].id+"'>"+list[ware].warehouseType. name+"</option>";
                       }


                       $('#type').html(typeList);
                       $('#warehouseId').html(wareList);
                       $('#supplier').html(subList);
                       $('#save').modal('show');
                   }else {
                       alert(date);
                   }
                }
            });

        }
        function doadd() {

            var options = $("#tb").bootstrapTable('getOptions');
            //得到当前页
            var pn = options.pageNumber;
            $("input[name='pn']").val(pn);
            var formStr = $('#goodsfrom').serialize();
            //处理表单控件的中文乱码
            params = decodeURIComponent(formStr, true);
            alert(params)
            $.ajax({

                'type': 'post',
                'url': '${pageContext.request.contextPath}/goods/save',
                'data': params,
                success: function (date) {
                    alert(date)
                    //关闭对话框
                    $("#save").modal('hide');
                    //重新加载表格
                    $("#tb").bootstrapTable('load',date);
                    //提示增加成功
                    swal("提示信息", "增加成功!", "success");
                }
            })
        }

        //删除
        function del() {
            var ids = "";
            //1.得到要删除的行
            //返回所选的行，当没有选择任何行的时候返回一个空数组。
            var rows = $("#tb").bootstrapTable("getSelections");
            if (rows.length == 0) {
                swal("提示信息", "请选择要删除的数据!", "info");
            }
            else {
                $.each(rows, function (index, row) {
                    ids = ids + row.id + "-";
                });

                swal({
                    title: "您确定要删除这条信息吗",
                    text: "删除后将无法恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "删除",
                    closeOnConfirm: false
                }, function () {
                    //得到当前页
                    //绑定当前页开始
                    var options = $("#tb").bootstrapTable('getOptions');
                    //得到当前页
                    var pn = options.pageNumber;
                    $.post("${pageContext.request.contextPath}/goods/del", {'ids': ids, 'pn': pn}, function (data) {
                        //友好的提示
                        swal("删除成功！", "您已经永久删除了这条信息。", "success");
                        //刷新表格
                        $("#tb").bootstrapTable('load', data);
                    })

                });
            }
        }

        
    </script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">商品列表</h3>
    </div>
    <div class="panel-body">
        <div class="col-sm-6">
            <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
            <button onclick="del()" class="btn btn-primary"><span class="glyphicon glyphicon-trash" ></span>&nbsp;&nbsp;删除</button>
        </div>
        <div class="col-sm-6">
            <form  class="form-inline pull-right">
                <input id="gname" type="text" class="form-control">
                <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
            </form>
        </div>
        <table id="tb"></table>
    </div>
</div>

<%--添加模板--%>
<div class="modal fade" id="save" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitleId">商品增加</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
                <form action="" method="post" class="form-horizontal" id="goodsfrom">
                    <input type="hidden" name="pn">
                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="name">商品名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="name" name="name"  placeholder="商品名称" />
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label">商品类型</label>
                        <div class="col-sm-6">
                            <select name="typeId" class="form-control" id="type" onchange="change()">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label">供应厂商</label>
                        <div class="col-sm-6">
                            <select name="supplierId" class="form-control" id="supplier">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="unit1">商品单位</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="unit1" name="unit"  placeholder="商品名称" />
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="purchasePrice">商品进价</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="purchasePrice" name="purchasePrice"  placeholder="商品进价" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="price">商品售价</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="price" name="price"  placeholder="商品售价" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="specifications">商品规格</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="specifications" name="specifications"  placeholder="商品规格" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label">仓库</label>
                        <div class="col-sm-6">
                            <select name="warehouseId" class="form-control" id="warehouseId">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="inventory">库存</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="inventory" name="inventory"  placeholder="库存" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doadd()">保存</button>
            </div>
        </div>
    </div>
</div>
</body>

<%--修改模块--%>
<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitleId">商品增加</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
                <form action="" method="post" class="form-horizontal" id="goodsfrom">
                    <input type="hidden" name="pn">
                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="name">商品名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="name" name="name"  placeholder="商品名称" />
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label">商品类型</label>
                        <div class="col-sm-6">
                            <select name="typeId" class="form-control" id="type" onchange="change()">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label">供应厂商</label>
                        <div class="col-sm-6">
                            <select name="supplierId" class="form-control" id="supplier">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="unit1">商品单位</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="unit1" name="unit"  placeholder="商品名称" />
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="purchasePrice">商品进价</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="purchasePrice" name="purchasePrice"  placeholder="商品进价" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="price">商品售价</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="price" name="price"  placeholder="商品售价" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="specifications">商品规格</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="specifications" name="specifications"  placeholder="商品规格" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label">仓库</label>
                        <div class="col-sm-6">
                            <select name="warehouseId" class="form-control" id="warehouseId">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="inventory">库存</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="inventory" name="inventory"  placeholder="库存" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doadd()">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
